<template>
  <el-dialog
    title="团购下单"
    :visible.sync="dialogVisible"
    width="350px"
    top="10%">
    <div id="group-order-join-dialog">
      <div>
          <el-button type="danger" @click="changeJoinType(0)">扫描二维码</el-button>
          <el-button type="success" @click="changeJoinType(1)">输入团购邀请码</el-button>
      </div>

      <div class="title-box">
        <div class="title">商品信息</div>
        <div class="item">
          <template v-if="productDetail.id===0">
            <div style="color: #AAAAAA; text-align: center; line-height: 30px;">
              暂未找到对应团购信息
            </div>
          </template>
          <template v-if="productDetail.id>0">
            <div class="product-name">
              <span>名称: {{ productDetail.name }}</span>
            </div>
            <img :src="productDetail.image" class="product-image"/>
            <div class="product-model">
              <span>型号: {{ productDetail.model }}</span>
            </div>
            <div class="product-price">
              价格: <span v-text="'￥'+ToMoney(productDetail.price)"></span>
            </div>
          </template>
        </div>
        <div class="c"></div>
      </div>

      <div class="title-box" v-if="groupOrder.orderNo!==''">
        <div class="title">团购订单</div>
        <div class="item">
          <template v-if="productDetail.orderNo!==''">
            <div class="row">
              <div class="name">已经参与人数/总需人数:</div>
              <div class="value">
                <span v-text="groupOrder.currNums+'/'+groupOrder.needNums"></span>
              </div>
            </div>
            <div class="row">
              <div class="name">剩余拼团时间:</div>
              <div class="value">
                <span v-text="groupOrder.endTime"></span>
              </div>
            </div>
          </template>
        </div>
        <div class="c"></div>
      </div>

    </div>
    <div slot="footer" class="dialog-footer" align="center">
      <el-button type="danger" @click="confirm" v-if="productDetail.id>0">自主开团</el-button>
      <el-button type="success" @click="confirm" v-if="groupOrder.orderNo!==''">拼团加入</el-button>
    </div>
  </el-dialog>

</template>

<script>
export default {
  name: 'GroupOrderJoinDialog',
  data: function () {
    return {
      callback: null,
      dialogVisible: true,
      isBinding: false,
      joinType: 0,
      productDetail: {
        id: 1,
        name: '美的智能洗鞋机',
        image: '',
        model: '大,黑',
        price: 891.00,
      },
      groupOrder: {
        orderNo: '',
        endTime: '04:40:18',
        currNums: 5,
        needNums: 10,
      }
    }
  },
  mounted () {
    let $this = this
    $this.bus.$on('GroupOrderJoinDialogCallBus', function (isBinding, callback) {
      $this.dialogVisible = true
      $this.isBinding = isBinding
      $this.submitType = 0
      $this.callback = callback
      $this.$forceUpdate()
    })

  },
  methods: {
    confirm: function () {
      if (typeof this.callback === 'function') {
        this.callback(this.submitType)
        this.dialogVisible = false
      }
    },
    changeJoinType: function (joinType) {
      if (joinType === 0) {
        alert('扫描二维码')
      }
      if (joinType === 1) {
        this.$prompt('请输入 团购邀请码', '系统提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^\d{6,10}$/,
          inputErrorMessage: '团购邀请码 不正确'
        }).then(({value}) => {
          alert('查询团购信息: ' + value)
        })
      }
    }
  }
}
</script>

<style scoped>

</style>
